<template>
  <div class="front-page">
    <navbar />
    <div class="bg-area">
      <img class="banner-title" src="../assets/img/frontpage/bannerTitle.png">
      <p class="two-title">GetWageNow experiences from digital payment services in daily life to financial achievements in your life journey.</p>
      <a-button class="btn">Borrow money now</a-button>
      <div>
      <img class="banner-pic" src="../assets/img/frontpage/bannerPic.png" alt="">
      </div>
    </div>
    <div class="overview-area">
      <div class="overview-content">
        <img src="../assets/img/frontpage/amount.png" class="content-pic">
        <h3>Application Amount</h3>
        <p>No guarantee required, the entire process is completed online</p>
      </div>
      <div class="overview-content">
        <img src="../assets/img/frontpage/amount.png" class="content-pic">
        <h3>Application Amount</h3>
        <p>No guarantee required, the entire process is completed online</p>
      </div>
      <div class="overview-content">
        <img src="../assets/img/frontpage/amount.png" class="content-pic">
        <h3>Application Amount</h3>
        <p>No guarantee required, the entire process is completed online</p>
      </div>
      <div class="overview-content">
        <img src="../assets/img/frontpage/amount.png" class="content-pic">
        <h3>Application Amount</h3>
        <p>No guarantee required, the entire process is completed online</p>
      </div>
    </div>
    <div class="instant-area">
      <div>
        <img src="../assets/img/frontpage/instant-pic.png">
      </div>
      <div>
        <h6>Instant access</h6>
        <p>Get your salary immediately. It is fast and easy to use, and there are no hidden fees</p>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '../components/Navbar.vue'
export default {
  components: { navbar }
}
</script>

<style lang="scss" scoped>
.front-page {
  margin: 0 auto;
  .bg-area {
    background: url("@/assets/img/frontpage/bg.png") no-repeat;
    background-size: 100%;
    height: 10rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .banner-title {
      height: 1rem;
      width: 8rem;    
    }
    p {
      height: 17px;
      font-size: 16px;
      font-family: ArialMT;
      color: rgba(250, 250, 250, 0.8);
      line-height: 18px;
      letter-spacing: 2px;
    }
    .btn {
      width: 128px;
      height: 22px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FC6700;
      line-height: 22px
    }
    .banner-pic {
      width: 10rem;
      height: 5rem;
    }
  }
  .overview-area{
    margin: 0 auto;
    display: flex;
    width:100%;
    justify-content: space-around;
    .overview-content{
      border: 1px solid #E1E1E1;
      border-radius: 10px;
      width: 2.48rem;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .content-pic {
        height: 1.09rem;
        width: 1.09rem;
      }
      p {
        align-items: center;
      }
    }
  }
  .instant-area {
    background: #FC6700 ;
    background-size: 100%;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
